<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制圆弧（圆）</title>
</head>
<body>
  <script type="module">
    import * as THREE from "./three.module.js";
    // 1,创建场景对象
    var scene = new THREE.Scene();
    // 2,创建普通模型对象
    var geometry = new THREE.BoxGeometry();
    // 创建圆弧对象 ArcCurve，参数：0, 0圆弧坐标原点x，y 100：圆弧半径 0, 2 * Math.PI：圆弧起始角度；
    var arcCurve = new THREE.ArcCurve(0,0,100,0,2*Math.PI);
    // getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
    // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
    geometry.setFromPoints(arcCurve.getPoints(50));
    var material = new THREE.LineBasicMaterial({color:0xee00ff});
    var line = new THREE.Line(geometry,material);
    scene.add(line);
    // 3，创建环境光对象
    var ambient = new THREE.AmbientLight({color:0xffffff});
    scene.add(ambient);
    // 4，创建相机对象
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-2000,2000);
    camera.position.set(200,300,200);
    camera.lookAt(scene.position);
     // 创建轴辅助对象
     var axes_helper = new THREE.AxesHelper(500);
     scene.add(axes_helper);
    // 5，创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
    }
    render();
    // 创建鼠标控制对象
    controls.addEventListener('change',render);
  </script>
</body>
</html>
